import React, { useEffect, useState } from 'react'
import SetTabBar from '@/components/tabBar'
import '../home/index.scss'
import HomeHeard from './component/HomeHeard/HomeHeard'
import { Swiper, Grid, Ellipsis, SpinLoading } from 'antd-mobile'
import { fetchHomeBanner, fetchCartList, fetchItems } from '@a/home'
import InfiniteScroll from 'react-infinite-scroll-component'
import { useNavigate , useDispatch} from 'umi'
import Icon from '@c/Icon'
export default function index() {
  // 请求轮播图信息
  const [banners, setBanners] = useState<Array<{ id: number, picUrl: string }>>([])
  const [lists, setList] = useState<Array<{ id: number, icon: string, name: string }>>([])
  const [items, setItems] = useState<Array<{ id: number, pic: string, name: string, minPrice: number }>>([])
  const navigate = useNavigate()
  const dispatch = useDispatch()
  const getBanner = () => {
    fetchHomeBanner().then((res: any) => {
      if (res.data.code === 0) {
        setBanners(res.data.data)
      }
    })
  }
  // 九宫格分类信息
  const getCartList = () => {
    fetchCartList().then(res => {
      if (res.data.code === 0) {
        setList(res.data.data.slice(0, -1))
      }
    })
  }
    // 商品是否还有数据
    const [hasMore,setHsaMore] = useState(true)
    // 分页
    const [page,setPage] = useState(1)
    // 上拉触底事件
    const searchBotton = () => {
      setPage(page+1)
    }
    // 上拉加载监听page变化重新发送请求
    useEffect(() => {
      getItens()
    },[page])
  // 商品列表
  const getItens = () => {
    fetchItems({
      page,
      pageSize: 5
    }).then(res => {  
      if (res.data.code === 0) {
        setItems([
          ...items,
          ...res.data.data.result
        ])
      }
      if(res.data.code === 700) {
        // 没有数据
        setHsaMore(false)
      }
    })
  }
  // 点击加入购物车
  const addItemsCart = (id:number) => {
    dispatch({
      type: 'cart/addCart',
      data: {
        goodsId: id,
        number: 1
      }
    })
  }
  useEffect(() => {
    getBanner(),
    getCartList()
  }, [])
  return (
    <div>
      <HomeHeard />
      <div className='home-main'>
        {/* 轮播图 */}
        <Swiper autoplay loop>
          {
            banners.map(banner => {
              return (
                <Swiper.Item key={banner.id}>
                  <img src={banner.picUrl} alt="" />
                </Swiper.Item>
              )
            })
          }
        </Swiper>
        {/* 九宫格 */}
        <Grid columns={5} gap={8}>
          {
            lists.map(list => {
              return (
                <Grid.Item key={list.id} onClick={() => {
                  navigate(`/itemList/${list.id}/${list.name}`)
                }}>
                  <div className='home-mian-nine'>
                    <img src={list.icon} alt="" />
                    <p>{list.name}</p>
                  </div>
                </Grid.Item>
              )
            })
          }
        </Grid>
        {/* 商品内容 */}
        {/* <InfiniteScroll
           dataLength={items.length}
           next={searchBotton }
           hasMore={hasMore}
           loader={
            <div style={{display: 'flex', justifyContent: 'center'}}>
              <SpinLoading color='primary' />
            </div>
           }
           endMessage={
             <p style={{ textAlign: 'center',marginBottom:50 }}>
               <b>我也是有底线的</b>
             </p>
           }
        > */}
        <div className='home-main-items'>
          {
            items.map(item => {
              return (
                <div className="item-box" key={item.id} onClick={() => {
                  navigate(`/detail/${item.id}`)
                }}>
                  <img src={item.pic} alt="" />
                  <div className="itenm-box-left">
                    <Ellipsis direction='end' content={item.name} />
                    <div className="itenm-box-left-bot">
                      <p>￥{item.minPrice}</p>
                      <div className="icon">
                        <Icon name='gouwuchetianjia' 
                        size={22} color={'white'} stop
                        onClick={
                          
                          () => {
                            addItemsCart(item.id)
                            console.log(111);
                            
                          }
                        }
                        />
                      </div>
                    </div>
                  </div>
                </div>
              )
            })
          }
        </div>
        {/* </InfiniteScroll> */}
      </div>
      <SetTabBar />
    </div>
  )
}
